<template>
  <basic-dialog
    :visible.sync="visible"
    :width="'634px'"
    :title="'异常提示'"
    :ok-text="'确定'"
    :handle-close="handleCloseDialog"
    :handle-ok="handleConfirm"
    :loadingBtn="btnLoading"
  >
    <el-form size="mini" ref="formData" :model="formData" :rules="formValidate">
      <el-card shadow="never" v-if="exceedNumText">
        <div slot="header">
          <span class="title">{{exceedNumText}}</span>
        </div>
        <el-form-item label="">
          <el-input
            v-model.trim="formData.exceedNumReason"
            type="textarea"
            rows='4'
            placeholder="请填写超上限1.2倍原因"
          />
        </el-form-item>
      </el-card>
      <el-card class="reason-card" shadow="never" v-if="exceedThreeOutText">
        <div slot="header">
          <span class="title">{{exceedThreeOutText}}</span>
        </div>
        <el-form-item label="">
          <el-input
            v-model.trim="formData.exceedThreeOutReason"
            type="textarea"
            rows='4'
            placeholder="请填写超3个月销量原因"
          />
        </el-form-item>
      </el-card>
    </el-form>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/pages/sourcing/components/BasicDialog';

export default {
  props: [
    'visible',
    'btnLoading',
    'exceedNumText', // 超上限1.2倍提示
    'exceedThreeOutText' // 超3个月销量提示
  ],
  components: {
    BasicDialog,
  },
  data () {
    return {
      formData: {
        exceedNumReason: '',
        exceedThreeOutReason: '',
      },
      formValidate: {
        exceedNumReason: [
          { required: true, message: '超数量1.2倍原因不能为空', trigger: 'change' }
        ],
        exceedThreeOutReason: [
          { required: true, message: '超3个月销量原因不能为空', trigger: 'change' }
        ],
      },
    };
  },
  methods: {
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    handleConfirm () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.$emit('handleFinish', { ...this.formData })
        }
      })
    }
  }
};
</script>
<style scoped>
.reason-card {
  margin-top: 5px;
}
</style>
